@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer utilities {

    .bigarea{
        position: relative;
    }
    .bigarea:after{
        content: "";
        position: absolute;
        left: -1em;
        top: -1em;
        right: -1em;
        bottom: -1em;
    }
    .bigarea-none:before {
        content: none;
    }

    .nav-mb {
        position: fixed;
        width: 100vw;
        height: 100vh;
        display: none;
    }

    .nav-mb .links {
        display: flex;
        position: absolute;
        z-index: 2;
        right: -100%;
        width: 64.58vw;
        height: 100vh;
        flex-direction: column;
        background-color: #252429;
        transition-property: left,right;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 500ms;
    }

    .nav-mb .nav-bg-mask {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 500ms;
    }

    .nav-mb a.link {
        height: 31.25vw;
        /*15rem 240px*/
        line-height: 31.25vw;
        width: 50.52vw;
        /*388px*/
        margin-left: 7.03vw;
        /*54px*/
        font-size: 4.16vw;
        color: #FFFFFF;
        border-bottom: 0.52vw solid #333333;
    }

    .nav-pc {
        display: block;
        margin-top: 2.25rem;
        position: relative;
        width: auto;
        height: auto;
        left: auto;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    nav.nav-pc .links {
        display: flex;
        position: relative;
        right: auto;
        flex-direction: row;
        width: auto;
        height: auto;
        background-color: transparent;
    }

    nav.nav-pc a.link {
        color: #fff;
        font-weight: 400;
        font-size: 0.875rem;
        height: auto;
        width: auto;
        line-height: 1.25rem;
        margin-left: 0;
        margin-right: 6rem;
        text-decoration: inherit;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        border-bottom: 0;
    }

    .nav-pc a.link:hover {
        transform: scale(1.1);
    }

    .nav-pc a.link.current:after {
        content: '';
        width: 90%;
        border-bottom: 2px solid #FF350D;
        display: block;
        margin: auto;
        height: 8px;
    }



    .annulusloading-svg-lg {
        width: 12px;
        height: 12px;
    }

    .annulusloading-svg-lg.current {
        width: 20px;
        height: 20px;
    }

}

* {
    font-family: 'Microsoft YaHei UI';
}
@font-face {
    font-family: iconfont;
    font-display: swap;
    src: url(../../public/fonts/iconfont.woff) format("woff"),url(../../public/fonts/iconfont.ttf) format("truetype");
    font-weight: 400;
    font-display: "auto";
    font-style: normal;
}

.icon{
    display: inline-block;
    font-family: iconfont!important;
    font-style:normal;
}
.icon-arrow-left:before {
    content: "\e7c4";
}
.icon-arrow-right:before {
    content: "\e7c5";
}
.icon-menu:after {
    content: '\e602';
}
.icon-close:after {
    content: '\e603';
}
.icon-arrows:after {
    content: '\e601';
}
.icon-email:before {
  content: "\e604";
}
.icon-tel:before {
  content: "\e605";
}
.icon-location:before {
  content: "\e606";
}



.logo {
    background: url(../../public/style-img/logo-original.png) no-repeat;
    background-size: 100% 100%;
}

.annulusloading-svg {
    transition-property: width, height;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    @apply mx-auto w-16px-vw h-16px-vw mt-10px-vw lg:w-3 lg:h-3
}

.annulusloading-svg.current {
    @apply w-24px-vw h-24px-vw  lg:w-5 lg:h-5
}

.annulusloading-svg-bg {
    opacity: 0.5;
    stroke: #B1B1B180;
    stroke-width: 10;
}

.annulusloading-svg-ring {
    stroke: #FFF;
    stroke-dasharray: 253px, 253px;
    stroke-dashoffset: 253px;
    stroke-width: 10;
    stroke-linecap: round;
    opacity: 1;
    transform: rotateZ(90deg);
    transform-origin: 50% 50%;
}

.annulusloading-svg.current .annulusloading-svg-ring {
    transition: stroke-dashoffset 0.3s ease 0s;
}

.carousel-pages{
    background-color: #000;
}
/**先定义初始状态*/
.carousel-page {
    opacity: 0;
}

.carousel-page .carousel-page-img {
    opacity: 0;
}

.carousel-page .carousel-page-title {
    opacity: 0;
}

.carousel-page .carousel-page-text {
    opacity: 0;
}

/*进场效果*/
.carousel-page.carousel-page-enter {
    opacity: 1;
}

.carousel-page.carousel-page-enter .carousel-page-img {
    opacity: 1;
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.carousel-page.carousel-page-enter .carousel-page-title {
    opacity: 1;
    /*标题还需要一个上浮*/
    transform:translateY(-20%);
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
}

.carousel-page.carousel-page-enter .carousel-page-text {
    opacity: 1;
    /*内容还需要一个上浮*/
    transform:translateY(-20%);
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    transition-delay: 1s;
}


/*退场效果*/
.carousel-page.carousel-page-exit {
    opacity: 0 !important;
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.carousel-page.carousel-page-exit .carousel-page-img {
    opacity: 0 !important;
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.carousel-page.carousel-page-exit .carousel-page-title {
    opacity: 0 !important;
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.carousel-page.carousel-page-exit .carousel-page-text {
    opacity: 0 !important;
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}


.p {
    text-indent: 2em;
}

.decorate-title {
    text-shadow: -1px 1px 0 #D9D9D9, 1px 1px 0 #D9D9D9, 1px -1px 0 #D9D9D9, -1px -1px 0 #D9D9D9;
}

.decorate-title-dark {
    text-shadow: -1px 1px 0 #353535, 1px 1px 0 #353535, 1px -1px 0 #353535, -1px -1px 0 #353535;
}

.decorate-bg-1 {
    background: url(../../public/style-img/decorate-bg-1-original.png) no-repeat;
    background-size: 100% 100%;
}

.company-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.tans-move-ease-out {
    transition-property: left, top, right, bottom;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.tans-opacity-ease-out {
    transition-property: opacity;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.tans-scale-ease-out {
    transition-property: all;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
}

.hover-scale:hover {
    transform: scale(1.1, 1.1);
}

.select-wrap:after{
    font-family: iconfont!important;
    content: '\e7c3';
    position: absolute;
    top:0;
    z-index: 0;
    right:1.2em;
}
.page-ctl-pages a.current{
    color:#FF350D !important;
    font-weight: 600;
}
.page-ctl .disabled{
    color:#dad8d8;
}

html{height:100%;}
body{min-height: 100vh;}
.app{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main{
    flex: 1;
}